<template>
  <breadcrumb></breadcrumb>
  <div>
    <el-input
        v-model="inputValue"
        placeholder="Please input"
        class="input-with-select"
        size="large"

    >
      <template #append>
        <el-button icon="Search" @click="handleSearch(inputValue)"/>
      </template>
    </el-input>
    <el-button type="primary" round plain >添加商品</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%" border stripe fit>
    <el-table-column type="index" label="序号"  align="center" width="80"/>
    <el-table-column prop="goods_name" label="商品名称" align="center" width="600"/>
    <el-table-column prop="goods_price" label="商品价格(元)" align="center"/>
    <el-table-column prop="goods_weight" label="商品重量" align="center"/>
    <el-table-column prop="upd_time" label="创建时间" align="center"/>
    <el-table-column prop="goods_id" label="id" align="center" class-name="goods_id"/>
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button type="primary" circle>
          <el-icon>
            <Edit />
          </el-icon>
        </el-button>
        <el-button type="danger" circle @click="delHandle(row.goods_id)">
          <el-icon>
            <Delete />
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="count"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
  />
</template>

<script  setup >
import {computed, onMounted, ref, watch,} from 'vue';
import {delGoods, getGoodsCategories, getGoodsList} from "../../apis/goods"
let inputValue = ref('');
let tableData = ref([])
let count = ref(1);
let pageSize = ref(10)
let total = ref(400);
const getGoods = () => {
  getGoodsList(inputValue.value, count.value,pageSize.value).then((res) => {
    tableData.value = res.data.goods;
    total.value = res.data.total;
  })
}
const delHandle = (id) => {
  delGoods(Number(id)).then((res) => {
    getGoods();
  })
}
const handleSearch = (value) => {
  getGoods()
}
onMounted(() => {
  getGoods();
})
watch(count,() => {
  getGoods()
})

watch(pageSize,() => {
  getGoods();
})
</script>

<style scoped lang="scss">
.el-input{
  width: 500px;
  margin-right:30px
}
// :deep(.goods_id){
//   display: none;
// }
</style>
